<template>
  <a :href="`/#/author/${id}`" class="author-search-block">
    <img :src="avatar" alt="author-avatar" title="avatar">
    <h4>{{name}}</h4>
  </a>
</template>

<script>
export default {
  name: "AuthorSearchBlock",
  props: {
    author: Object
  },
  data() {
    return {

    };
  },
  computed: {
    avatar() {
      return this.author.avatar;
    },
    name() {
      return this.author.name;
    },
    id() {
      return this.author.id;
    }
  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.author-search-block {
  width: 280px;
  height: 160px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: normal;
  >img {
    margin: 10px;
    height: 80px;
  }
  >h4 {
    &:hover {
      color: rgb(42, 115, 117);
    }
  }
}
</style>
